<template>
  <div class="list-title">
    <div class="left"
      @click="$emit('play-all')">
      <div class="icon-wrapper">
        <svg-icon icon-class="play"></svg-icon>
      </div>
      <div class="play-all">
        <strong>播放全部</strong>
        <em class="count">(共{{ count }}首)</em>
      </div>
    </div>

    <div class="right"
      v-coming="''">
      <div class="content">
        <svg-icon icon-class="add"></svg-icon>
        收藏<span v-show="collect" class="count">({{ collect }})</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'song-list-title',
  props: {
    count: {
      type: Number,
      default: 0
    },
    collect: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.list-title {
  position: relative;
  z-index: 10;
  top: 0;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: .5rem;
  margin-top: -.5rem;
  @media (max-height: 600px) {
    margin-top: -.35rem;
  }
  border-radius: .2rem .2rem 0 0 / .2rem .2rem 0 0;
  background-color: #fff;
  .left {
    flex: 1;
    display: flex;
    line-height: .5rem;
    .icon-wrapper {
      width: .4rem;
      text-align: center;
      font-size: .2rem;
    }
    .play-all {
      font-size: $font--medium;
      .count {
        vertical-align: .02rem;
        font-size: $font--small;
        color: #ccc;
      }
    }
  }
  .right {
    box-sizing: border-box;
    min-width: .5rem;
    margin: .075rem;
    .content {
      box-sizing: border-box;
      padding: .075rem;
      line-height: .2rem;
      color: #fff;
      font-size: $font--small;
      border-radius: .2rem;
      background-color: #d62c39;
      .count {
        font-size: $font--small-s;
        vertical-align: .01rem;
      }
    }
  }
}
</style>
